<template>
  <Card title="串口配置" icon="ios-options" :padding="0" shadow style="width: 100%;">
    <ButtonGroup slot="extra">
      <Button icon="md-add" @click="newCfg" size="small">添加</Button>
      <Upload :before-upload="importCSV" action style="position: relative;float: left">
        <Button icon="md-download" size="small">导入</Button>
      </Upload>
      <Button icon="md-share-alt" size="small" @click="exportCSV()">导出</Button>
    </ButtonGroup>
    <Table
      border
      :columns="columns12"
      :data="getHConfTbl"
      size="small"
      :height=getButtomHeight
      ref="uartCfgTable"
    >
      <template slot-scope="{ row }" slot="name">
        <strong>{{ row.name }}</strong>
      </template>
      <template slot-scope="{ row, index }" slot="action">
        <Tooltip content="详细" placement="top-end">
        <Button type="primary" size="small" style="margin-right: 5px" icon="md-text" @click="show(index)"></Button>
        </Tooltip>
        <Tooltip content="编辑" placement="top">
        <Button type="error" size="small"   icon="md-create"    @click="edit(index)"></Button>
        </Tooltip>
        <Tooltip content="删除" placement="top-start">
        <Button type="error" size="small"   icon="md-trash"    @click="remove(index)"></Button>
        </Tooltip>
      </template>
    </Table>
  </Card>
</template>
<script>
import REDUCE from "lodash/reduce";
export default {
  components: {
  },
  data() {
    return {
      newCfgDiag: false,
      isUsed: false,
      columns12: [
        {
          title: "名字",
          slot: "name",
          resizable: true,
        },
        {
          title: "波特率",
          key: "baudRate",
          resizable: true,
        },
        {
          title: "数据位",
          key: "dataBits",
          resizable: true,
        },
        {
          title: "停止位",
          key: "stopBits",
          resizable: true,
        },
        {
          title: "校验位",
          key: "parity",
          resizable: true,
        },
        {
          title: "Action",
          slot: "action",
          width: 160,
          resizable: true,
          align: "center",
        },
      ],
      columnsCSV:[
         {
          title: "名字",
          key: "name",
        },
        {
          title: "波特率",
          key: "baudRate",
        },
        {
          title: "数据位",
          key: "dataBits",
        },
        {
          title: "停止位",
          key: "stopBits",
        },
        {
          title: "校验位",
          key: "parity",
        },
        {
          title: "备注",
          key:"desc",
        },
      ]
    };
  },
  computed: {
    getHConfTbl() {
      return this.$store.getters.getHardConfTbl;
    },
    getButtomHeight: function () {
      return this.$store.getters.getBottomHeight-36-51;
    },

  },
  methods: {
    newCfg() {
      if (this.getHConfTbl.length < 20) {
        let name= "hardCfgEditer"
        let index = -1
        this.$store.dispatch("openUartCfgEditer",{name,index})
      } else {
        this.$Message.error("最多20条配置,请删除后,再试!!!");
      }
    },
    exportCSV() {
      this.$refs.uartCfgTable.exportCsv({
        filename: "配置文件",
        columns: this.columnsCSV,
        data: this.getHConfTbl
      });
    },

    importCSV(file) {
      console.log(file)
      let keyMap = REDUCE(
        this.columnsCSV,
        function (result, value) {
          result[value.key]= value.title;
          return result;
        },
        {}
      );
      console.log(keyMap)
      this.$store
        .dispatch("addCsvCfg", {
          file: file,
          keyMap: keyMap,
        })
        .then(() => {
          this.$Message.success("csv读取成功");
        })
        .catch((err) => {
          this.$Message.error(err);
        });

      return false;
    },
    show(index) {
      this.$Modal.info({
        title: "配置信息",
        content: `名字：${this.getHConfTbl[index].name}<br>波特率：${this.getHConfTbl[index].baudRate}<br>数据位：${this.getHConfTbl[index].dataBits}<br>停止位：${this.getHConfTbl[index].stopBits}<br>校验位：${this.getHConfTbl[index].parity}<br>描述：${this.getHConfTbl[index].desc}`,
      });
    },
    edit(index) {
        let name= "hardCfgEditer"
        this.$store.dispatch("openUartCfgEditer",{name,index})
    },
    remove(index) {
      this.$store.dispatch("delHardCfg", index);
    },

    
  },
};
</script>